// 实现这个项目的构建任务
const { src, dest, parallel, series, watch } = require("gulp");
const loadPlugins = require("gulp-load-plugins");
const del = require("del");
const plugins = loadPlugins();
const bs = require("browser-sync");

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};
const tempDir = ".temp";
const releaseDir = "dist";

const buildHtml = () => {
  return src("src/*.html", { base: "src" })
    .pipe(plugins.swig({ data, default: { caches: false } }))
    .pipe(dest(tempDir))
    .pipe(bs.reload({ stream: true }));
};

const buildJs = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel())
    .pipe(dest(tempDir))
    .pipe(bs.reload({ stream: true }));
};

const buildCss = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest(tempDir))
    .pipe(bs.reload({ stream: true }));
};

const buildImage = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest(releaseDir));
};

const buildFont = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest(releaseDir));
};

const buildOther = () => {
  return src("public/**", { base: "public" }).pipe(dest(releaseDir));
};

const clean = () => {
  return del([releaseDir, tempDir]);
};

const webServer = () => {
  watch("src/assets/styles/*.scss", buildCss);
  watch("src/assets/scripts/*.js", buildJs);
  watch("src/*.html", buildHtml);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  bs.init({
    notify: false,
    port: 3000,
    server: {
      baseDir: [tempDir, "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return src(`${tempDir}/*.html`, { base: tempDir })
    .pipe(plugins.useref({ searchPath: [tempDir, "."] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(
      plugins.if(
        /\.html$/,
        plugins.htmlmin({
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: true,
        })
      )
    )
    .pipe(dest(releaseDir));
};

const compile = parallel(buildHtml, buildCss, buildJs);

const develop = series(compile, webServer);

const build = series(
  clean,
  parallel(series(compile, useref), buildImage, buildFont, buildOther)
);

module.exports = { compile, develop, build };
